<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>KLIPSE: a simple and elegant online cljs compiler and evaluator</title>
        <link rel='shortcut icon' type='image/x-icon' href='img/klipse.png' />
        <link rel="stylesheet" type="text/css" href="css/codemirror.css">
    </head>
    <body>


<pre><code class="js" data-external-libs="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-with-addons.js, https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js">
    Object.keys(React)
</code></pre>


<pre><code class="transpile-jsx">
      &lt;div className="shopping-list"&gt;
        &lt;h1&gt;Shopping List for {this.props.name}&lt;/h1&gt;
      &lt;/div&gt;
</code></pre>

<pre><code class="jsx">
class ShoppingList extends React.Component {
  render() {
    return (
      &lt;div className="shopping-list"&gt;
        &lt;h1&gt;Shopping List for {this.props.name}&lt;/h1&gt;
        &lt;ul&gt;
          &lt;li&gt;Instagram&lt;/li&gt;
          &lt;li&gt;WhatsApp&lt;/li&gt;
          &lt;li&gt;Oculus&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
}
window.ShoppingList = ShoppingList
</code></pre>
<code><pre class="js">
ShoppingList
</code></pre>

<pre><code class="render-jsx">
&lt;i&gt;&lt;ShoppingList&gt;&lt;/ShoppingList&gt;&lt;/i&gt;
</code></pre>


<pre><code class="react">
React.createElement(ShoppingList)
</code></pre>


<pre><code class="js" data-async-code="true">
ReactDOM.render(React.createElement(ShoppingList), klipse_container)
</code></pre>


<br/>
      <script>
        window.klipse_settings = {
            selector_eval_js: '.js',
        selector_jsx: '.jsx',
	selector_render_jsx: '.render-jsx',
        selector_transpile_jsx: '.transpile-jsx',
	selector_react: '.react',
        };
        </script>
        <script src="/fig/js/klipse.fig.js"></script>
    </body>
</html>
